<template>
  <motion-div
    :initial="{ opacity: 0, y: 20 }"
    :animate="{ opacity: 1, y: 0 }"
    class="bg-white rounded-xl shadow-sm p-6"
  >
    <!-- 标题和图例 -->
    <div class="mb-4">
      <div class="flex items-center justify-between">
        <div>
          <h3 class="text-lg font-semibold text-gray-900">知识掌握度分析</h3>
          <p class="text-sm text-gray-600 mt-1">
            深色表示掌握程度较高，浅色表示需要加强练习
          </p>
        </div>
        <div class="flex items-center space-x-2 text-xs text-gray-500">
          <div class="flex items-center">
            <div class="w-3 h-3 bg-red-200 rounded mr-1"></div>
            <span>需提升</span>
          </div>
          <div class="flex items-center">
            <div class="w-3 h-3 bg-yellow-200 rounded mr-1"></div>
            <span>一般</span>
          </div>
          <div class="flex items-center">
            <div class="w-3 h-3 bg-green-400 rounded mr-1"></div>
            <span>优秀</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 热力图图表 -->
    <Plotly
      :data="heatmapData"
      :layout="layout"
      :config="config"
      class="w-full"
    />
    
    <!-- 统计卡片 -->
    <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
      <div class="bg-green-50 rounded-lg p-3">
        <div class="text-sm font-medium text-green-800">优势领域</div>
        <div class="text-xs text-green-600 mt-1">
          {{ strongTopics || '暂无' }}
        </div>
      </div>
      
      <div class="bg-yellow-50 rounded-lg p-3">
        <div class="text-sm font-medium text-yellow-800">需要关注</div>
        <div class="text-xs text-yellow-600 mt-1">
          {{ weakTopics || '暂无' }}
        </div>
      </div>
      
      <div class="bg-blue-50 rounded-lg p-3">
        <div class="text-sm font-medium text-blue-800">平均掌握度</div>
        <div class="text-xs text-blue-600 mt-1">
          {{ averageMastery }}%
        </div>
      </div>
    </div>
  </motion-div>
</template>

<script setup>
import { computed } from 'vue';
// import VuePlotly from 'vue3-plotly'  // 根据您实际使用的库调整


const props = defineProps({
  data: {
    type: Object,
    required: true,
    validator: (value) => {
      return (
        Array.isArray(value.topics) &&
        Array.isArray(value.subtopics) &&
        Array.isArray(value.masteryMatrix) &&
        Array.isArray(value.dates)
      );
    }
  }
});

// 计算热力图数据
const heatmapData = computed(() => [{
  z: props.data.masteryMatrix,
  x: props.data.subtopics,
  y: props.data.topics,
  type: 'heatmap',
  colorscale: [
    [0, '#fee2e2'],      // Very light red for low mastery
    [0.2, '#fecaca'],    // Light red
    [0.4, '#fed7aa'],    // Light orange
    [0.6, '#fde68a'],    // Light yellow
    [0.8, '#bbf7d0'],    // Light green
    [1, '#34d399']       // Strong green for high mastery
  ],
  showscale: true,
  colorbar: {
    title: {
      text: '掌握度',
      side: 'right'
    },
    tickmode: 'array',
    tickvals: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
    ticktext: ['0%', '20%', '40%', '60%', '80%', '100%'],
    thickness: 15,
    len: 0.7
  },
  hovertemplate: 
    '<b>%{y}</b><br>' +
    '<b>%{x}</b><br>' +
    '掌握度: %{z:.1%}<br>' +
    '<extra></extra>',
  zmin: 0,
  zmax: 1
}]);

// 图表布局配置
const layout = computed(() => ({
  title: {
    text: '知识点掌握度热力图',
    font: { size: 18, color: '#1f2937' },
    x: 0.05
  },
  xaxis: {
    title: '知识子点',
    tickangle: -45,
    side: 'bottom',
    tickfont: { size: 11 },
    titlefont: { size: 14 }
  },
  yaxis: {
    title: '主要领域',
    tickfont: { size: 12 },
    titlefont: { size: 14 }
  },
  height: 500,
  margin: { 
    t: 60, 
    r: 80, 
    l: 120, 
    b: 120 
  },
  paper_bgcolor: 'transparent',
  plot_bgcolor: 'transparent',
  font: {
    family: 'Inter, system-ui, sans-serif'
  }
}));

// 图表配置
const config = {
  displayModeBar: true,
  displaylogo: false,
  modeBarButtonsToRemove: ['pan2d', 'lasso2d', 'select2d'],
  responsive: true
};

// 计算优势领域
const strongTopics = computed(() => 
  props.data.topics.filter((_, index) => 
    props.data.masteryMatrix[index]?.some(val => val > 0.8)
  ).slice(0, 2).join(', ')
);

// 计算需要关注的领域
const weakTopics = computed(() => 
  props.data.topics.filter((_, index) => 
    props.data.masteryMatrix[index]?.some(val => val < 0.4)
  ).slice(0, 2).join(', ')
);

// 计算平均掌握度
const averageMastery = computed(() => 
  Math.round(
    props.data.masteryMatrix.flat().reduce((a, b) => a + b, 0) / 
    props.data.masteryMatrix.flat().length * 100
  )
);
</script>

<style scoped>
/* 自定义样式 */
</style>
